<template>
  <div class="order-detail">
    <ZJHeader class="detail-header">
      <template #left>
        <div class="header-left">
          <van-icon class="icon" name="arrow-left" @click="$router.replace('/order')"/>
          <p class="word">{{ orderStatus }}</p>
        </div>
      </template>
    </ZJHeader>
    <div class="goods card-normal">
      <!--   店铺标题   -->
      <h3 class="shop-name">
        乐享家私自营店
      </h3>
      <!--   商品信息   -->
      <template v-for="item in orderModule.currentOrderDetail.sysOrderItemsVo" :key="item.id">
        <div class="goods-info" @click="$router.push(`/goods/detail/${item.productId}`)">
          <div class="info-img">
            <img :src="item.productImage" alt="product_image">
          </div>
          <div class="info-detail">
            <p class="detail-title">{{ item.productName }}</p>
            <p class="detail-spec">
              <template v-for="jItem in Object.keys(item.productSpecs)" :key="jItem">
                <span>
                  {{ item.productSpecs[jItem] }}&nbsp;
                </span>
              </template>
            </p>
          </div>
          <div class="info-price">
            <span class="total">
              <span class="symbol">￥</span>
              <span class="value">{{ item.quantity * item.currentUnitPrice }}</span>
            </span>
            <span class="count">×{{ item.quantity }}</span>
          </div>
        </div>
      </template>
      <p class="total-price">
        <span class="tip">总价:</span>
        <span class="price">￥{{ orderModule.currentOrderDetail.payment }}</span>
      </p>
      <div class="btn-wrapper">
        <button class="add-car-btn">加入购物车</button>
      </div>
      <!--   订单信息和收货信息   -->
      <div class="order-evidence">
        <EvidenceItem :rightWord="wholeAddress"/>
        <EvidenceItem leftWord="订单编号：" :rightWord="orderModule.currentOrderDetail.orderNo"/>
        <EvidenceItem leftWord="创建时间：" :rightWord="orderModule.currentOrderDetail.createTime"/>
        <template v-if="orderModule.currentOrderDetail.paymentTime">
          <EvidenceItem leftWord="付款时间：" :rightWord="orderModule.currentOrderDetail.paymentTime"/>
        </template>
      </div>
      <!--   固定操作栏   -->
      <van-submit-bar class="submit-bar">
        <template #button>
          <button @click="handleOrderDelete">删除订单</button>
          <button class="light" v-if="orderModule.currentOrderDetail.status === 1" @click="handleOrderPay">付款</button>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script setup lang="ts">

import ZJHeader from "../../../components/ZJHeader/ZJHeader.vue";
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import useOrderModule from "@/store/orderModule";
import EvidenceItem from "@/views/ZJOrder/OrderDetail/EvidenceItem/EvidenceItem.vue";
import {getWholeAddress, handleToPage} from "@/utils";
import {IAddress} from "@/store/myModule/types";
import {Dialog, Toast} from "vant";
import usePayModule from "@/store/payModule";

const route = useRoute()
const router = useRouter()
const payModule = usePayModule()
const orderModule = useOrderModule()
const orderStatus = computed(() => {
  const statusItems = ["已取消", "待付款", "待发货", "已发货", "交易成功"]
  return statusItems[orderModule.currentOrderDetail.status]
})
const {payId} = route.query
// 初始化订单详情
const setupOrderDetail = async () => {
  await orderModule.setOrderDetailAction({
    orderNo: parseInt(<string>payId)
  })
  const {
    receiverProvince,
    receiverCity,
    receiverDistrict,
    receiverAddress
  } = orderModule.currentOrderDetail.address as IAddress
  wholeAddress.value = getWholeAddress(receiverProvince, receiverCity, receiverDistrict, receiverAddress)
}

const wholeAddress = ref("")
// 订单删除
const handleOrderDelete = () => {
  const orderNo = orderModule.currentOrderDetail.orderNo
  if (!orderNo) {
    return Toast.fail("获取订单号失败")
  }
  Dialog.confirm({
    title: '提示',
    message:
        '确定要删除这个订单吗？',
  })
      .then(async () => {
        const isSuccess = await orderModule.deleteOrderAction({
          orderNo
        })
        if (isSuccess) {
          Toast.success("删除成功")
          await router.replace("/order")
        }
      })
      .catch(() => {
      });
}
// 订单支付
const handleOrderPay = async () => {
  const {orderNo, paymentType} = orderModule.currentOrderDetail
  const scriptPage = await payModule.createPayAction({
    paymentType,
    orderNo
  })
  if (scriptPage) {
    handleToPage(scriptPage)
  }
}
onMounted(async () => {
  const toast = Toast.loading({
    message: "加载中...",
    duration: 6000
  })
  if (payId) {
    await setupOrderDetail()
    toast.clear()
  } else {
    Toast.fail("获取订单号失败")
  }
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.order-detail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @theme-grey-color;
  z-index: 890;

  .detail-header {
    background-color: @theme-grey-color;

    .header-left {
      color: #333;
      display: flex;
      align-items: center;

      .icon {
        font-size: 18px;
      }

      .word {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }

  .goods {
    padding: 10px;

    .shop-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .goods-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .info-img {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        margin-right: 14px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }

      .info-detail {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-right: 14px;

        .detail-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 8px;
          .clamp(2);
        }

        .detail-spec {
          font-size: 14px;
          color: #999;
          margin-bottom: 8px;
        }
      }

      .info-price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .total {
          font-weight: 600;

          .symbol {
            font-size: 12px;
          }
        }

        .count {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .total-price {
      text-align: right;
      margin-bottom: 8px;
      .tip {
        font-size: 14px;
        font-weight: 600;
      }
      .price {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .btn-wrapper {
      text-align: right;

      .add-car-btn {
        color: #999;
        border: 1px solid #e1e1e1 !important;
        border-radius: 20px;
        padding: 4px 8px !important;
        font-size: 14px;
        font-weight: 600;
        background: none;
      }
    }

    .order-evidence {
      margin-top: 20px;
    }
  }

  .submit-bar {
    button {
      border: 1px solid #ccc !important;
      background: none;
      padding: 4px 8px;
      margin-left: 10px;
      border-radius: 20px;

      &.light {
        border: 1px solid @orange-color !important;
        color: @orange-color;
        padding: 4px 16px;
      }
    }
  }
}
</style>
